<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>内联按钮 Inline buttons-JQUERY MOBILE 1.0正式版中文手册</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script>
 </script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/button/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
  <h1>内联按钮 Inline buttons</h1>
  <div class="desc">
  <div>默认情况下，body里的所有按钮都会被样式化为块级元素，撑大到与页面等宽</div>
  <div>但是，如果你想让按钮外观紧凑，宽度只符合里面的文字和icon，那就给按钮添加data-inline="true"的属性</div>
  </div>
    	<p class="indent"><strong>内联的按钮：</strong></p>
		<img src="../../images/Inline buttons_1.png" tppabs="http://www.jqmapi.com/images/Inline%20buttons_1.png">
            	<hr />
		<div class="desc">
<div>如果你有多个按钮想在一行横排，可以在按钮上增加data-inline="true"的属性，这样就可以把按钮样式化为最小宽度，并且浮动，使他们在同一行横排</div>
</div>

  <div class="code"> 
    <p>&lt;div data-inline=&quot;true&quot;&gt;<br /> 
    　
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Cancel&lt;/a&gt;<br /> 
　
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;b&quot;&gt;Save&lt;/a&gt;<br />
&lt;/div&gt;</p>
  </div>
        <p class="indent"><strong>内联的按钮组</strong></p>
  <img src="../../images/Inline buttons_2.png" tppabs="http://www.jqmapi.com/images/Inline%20buttons_2.png">
<div class="desc">如果你想多个按钮在通过一行横排并且容器自动撑大到与页面同宽，可以使用  内容分栏 把多个普通的块级按钮 放入同一行内</div>
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



